---
type: tutorial
title: 소셜 미디어 바닥글 만들기
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 처음부터 새 컴포넌트를 구축한 다음 페이지에 추가하세요.
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - 바닥글 컴포넌트 만들기
  - 소셜 미디어 컴포넌트에 props를 생성하고 전달합니다.
</PreCheck>

이제 페이지에서 Astro 컴포넌트를 사용했으므로 다른 컴포넌트 내에서 컴포넌트를 사용할 차례입니다!

## 바닥글 컴포넌트 만들기
<Steps>
1. `src/components/Footer.astro` 위치에 새 파일을 만듭니다.

2. 다음 코드를 새 파일 `Footer.astro`에 복사합니다.

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>
    ```
</Steps>

### `Footer.astro` 가져오기 및 사용

<Steps>
1. 세 개의 Astro 페이지 (`index.astro`, `about.astro`, `blog.astro`) 각각의 프런트매터에 다음 import 문을 추가하세요.

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. 페이지 하단에 바닥글을 표시하려면 닫는 `</body>` 태그 바로 앞에있는 각 페이지의 Astro 템플릿에 새로운 `<Footer />` 컴포넌트를 추가하세요.

    ```astro ins={1}
        <Footer />
      </body>
    </html>
    ```

3. 브라우저 미리보기에서 각 페이지의 새 바닥글 텍스트가 보이는지 확인하세요.
</Steps>

<Box icon="puzzle-piece">

## 직접 시도해 보기 - 바닥글 맞춤설정

여러 소셜 네트워크 (예: Instagram, Twitter, LinkedIn)를 표시하도록 바닥글을 사용자 정의하고 사용자 이름을 포함하여 자신의 프로필에 직접 연결하세요.

</Box>

### 코드 체크인

튜토리얼의 각 단계를 따라왔다면 `index.astro` 파일은 다음과 같아야 합니다:

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Home Page';
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
    <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>
```

## 소셜 미디어 컴포넌트 만들기

연결할 수 있는 온라인 계정이 여러 개 있을 수 있으므로 재사용 가능한 단일 컴포넌트를 만들어 여러 번 표시할 수 있습니다. 매번 사용할 다른 속성 (`props`) (온라인 플랫폼 및 사용자 이름)을 전달합니다.

<Steps>
1. `src/components/Social.astro` 위치에 새 파일을 생성합니다.

2. 다음 코드를 새 파일 `Social.astro`에 복사합니다.

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```
</Steps>

### 바닥글에 `Social.astro`를 가져와 사용

<Steps>
1. `src/components/Footer.astro`의 코드를 변경하여 가져오고 이 새 컴포넌트를 세 번 사용하고 매번 다른 **컴포넌트 속성**을 props로 전달합니다.

    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. 브라우저 미리보기를 확인하면 각 페이지에 이 세 가지 플랫폼에 대한 링크가 표시되는 새 바닥글이 표시됩니다.
</Steps>

## 소셜 미디어 컴포넌트 스타일 지정

<Steps>
1. `src/components/Social.astro`에 `<style>` 태그를 추가하여 링크 모양을 사용자 정의하세요.

    ```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. 내용의 레이아웃을 개선하려면 `src/components/Footer.astro`에 `<style>` 태그를 추가하세요.

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

3. 브라우저 미리보기를 다시 확인하고 각 페이지에 업데이트된 바닥글이 표시되는지 확인하세요.
</Steps>

<Box icon="question-mark">

### 지식 테스트

1. `title`, `author`, `date` 값을 props로 받으려면 Astro 컴포넌트의 프런트매터에 어떤 코드 줄을 작성해야 합니까?

    <MultipleChoice>
      <Option isCorrect>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option>
        `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>
    

2. Astro 컴포넌트에 어떻게 **값을 props로 전달**합니까?
    <MultipleChoice>
      <Option>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option isCorrect>
        `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## 체크리스트

<Checklist>
- [ ] `src/components/`에 새로운 `.astro` 컴포넌트를 만들 수 있습니다.
- [ ] Astro 컴포넌트를 다른 Astro 컴포넌트 내부로 가져와 사용할 수 있습니다.
- [ ] Astro 컴포넌트에 props를 전달할 수 있습니다.
</Checklist>
</Box>

### 참고 자료

- [Astro 컴포넌트의 Props](/ko/basics/astro-components/#컴포넌트-props)
